<template>
    <div>
        <div class="title">{{ title }}</div>
        <div class="container">
            <div class="left">
                <div class="left-title">数据</div>
                <div class-:search>
                    <el-input placeholder="请输入内容" v-model="searchValue" class="left-search" size="small">
                        <el-button slot="append" icon="el-icon-search" class="left-search-button" @click="search" v-debounce> </el-button>
                    </el-input>
                    <span style="margin-left: 10px; color: red">双击行选择或取消选择数据 </span>
                </div>
                <el-table :data="tableData" style="width: 100%" border height="388" :row-class-name="tableRowClassName" @cell-dblclick="cellDblclick">
                    <el-table-column
                        :prop="item.prop"
                        :label="item.label"
                        width="tableColumnWidth.leftWidth"
                        v-for="item in tableColumnAttr"
                        :key="item.prop"
                        show-overflow-tooltip
                        :type="item.label === '序号' ? 'index' : 'text'"
                    >
                    </el-table-column>
                </el-table>
                <ComPagination
                    :total="pagination.total"
                    :pageSize.sync="pagination.pageSize"
                    :currentPage.sync="pagination.currentPage"
                    @currentChange="currentChange"
                    @sizeChange="currentChange"
                />
            </div>
            <div class="right">
                <div class="right-title">数据</div>
                <el-table :data="selectData" style="width: 100%" border :row-class-name="tableRowClassName" @cell-dblclick="rightCellDblclick">
                    <el-table-column
                        :prop="item.prop"
                        :label="item.label"
                        :width="tableColumnWidth.rightWidth"
                        v-for="item in tableColumnAttr"
                        :key="item.prop"
                        show-overflow-tooltip
                        :type="item.label === '序号' ? 'index' : 'text'"
                    >
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div class="bottom">
            <div>
                <el-button type="success" size="mini" @click="confirm">确认</el-button>
                <el-button size="mini" @click="cancel">取消</el-button>
            </div>
        </div>
    </div>
</template>
<script>
import ComPagination from '@/components/pagination/pagination.vue'
export default {
    props: {
        tableData: {
            type: Array
        },
        tableColumnAttr: {
            type: Array
        },
        tableColumnWidth: {
            type: Object,
            default: function () {
                return {
                    leftWidth: '150',
                    rightWidth: '100'
                }
            }
        },
        pagination: {
            type: Object,
            default: ()=>{
                return {
                    'limit': 10,
                    'page': 1,
                    'total': 20
                }
            },
        },
        title: {
            type: String,
            default: '标题'
        },
        selectMode: {
            type: Number,
            default: 0
        },
        keyWord: {
            type: String
        }
    },
    data () {
        return {
            searchValue: '',
            selectData: []
        }
    },
    components: { ComPagination },
    methods: {
        cancel () {
            this.$emit('cancel')
        },
        confirm () {
            if (this.selectMode === 0) {
                this.$emit('confirm', this.selectData[0])
            } else {
                this.$emit('confirm', this.selectData)
            }
        },
        search () {
            this.$emit('search', this.searchValue)
        },
        currentChange (page) {
            this.$emit('currentChange', page)
        },
        // eslint-disable-next-line no-unused-vars
        cellDblclick (row, column, cell, event) {
            //单选
            if (this.selectMode === 0) {
                this.selectData = [row]
            } else {
                // 多选
                // 每个接口不同
                if (this.selectData.find(value => value[this.keyWord] === row[this.keyWord])) {
                    this.$message({
                        showClose: true,
                        type: 'error',
                        message: '你已添加过相同数据'
                    })
                } else {
                    this.selectData.push(row)
                }
            }
        },
        // eslint-disable-next-line no-unused-vars
        rightCellDblclick (row, column, cell, event) {
            const index = this.selectData.findIndex(value => value[this.keyWord] === row[this.keyWord])
            this.selectData.splice(index, 1)
        },
        // eslint-disable-next-line no-unused-vars
        tableRowClassName ({ row, rowIndex }) {
            if (rowIndex % 2 == 0) {
                return ''
            } else {
                return 'double-row'
            }
        }
    },
    created () {
        // console.log('tableData', this.tableData)
        // console.log('tableColumnAttr', this.tableColumnAttr)
    }
}
</script>
<style lang="scss" scoped>
.title {
    font-size: 17px;
}
.container {
    margin-top: 20px;
    display: flex;
    height: 550px;
    .left {
        width: 60%;
        border: 1px solid #c0c0c0;
        border-radius: 3px;
        position: relative;
        margin-right: 10px;
        .left-title {
            position: absolute;
            top: -10px;
            left: 10px;
            padding: 0 5px;
            background: #fff;
        }
        .left-search {
            margin-top: 20px;
            margin-left: 10px;
            width: 40%;
            .left-search-button {
                background: #42b4ee;
                color: #fff;
                height: 32px;
                position: relative;
                top: 2px;
                border-radius: 0 4px 4px 0;
            }
        }
    }
    .right {
        width: 40%;
        border: 1px solid #c0c0c0;
        border-radius: 3px;
        position: relative;
        .right-title {
            position: absolute;
            top: -10px;
            left: 10px;
            padding: 0 5px;
            background: #fff;
        }
        .el-table {
            margin-top: 20px;
        }
    }
}
.el-table {
    margin-top: 10px;
    ::v-deep th {
        padding: 10px;
    }
    ::v-deep td {
        padding: 10px;
    }
    ::v-deep .double-row {
        background: #e3edf7 !important;
    }
    ::v-deep .el-table__body tr:hover > td {
        background-color: #b3d2ee !important;
    }
    ::v-deep .cell {
        white-space: nowrap;
    }
}
.bottom {
    margin-top: 10px;
    text-align: right;
}
</style>
